<template>
  <div id="Role_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivLeft">
          会社名称:
          <el-select v-model="Search.searchbean.groupEnterpriseGuid" placeholder="" class="cpnSelect">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
          >&nbsp; 役職名称: <el-input v-model="Search.searchbean.roleName" placeholder=""></el-input>
          <el-button type="primary" v-preventReClick class="search" icon="el-icon-search" @click="SearchRole()">検索</el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="dialogFormVisible = true">新規</el-button>
          <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="ReviseRole()">修正</el-button>
          <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="deleteRole()">削除</el-button>
          <el-button type="info" v-preventReClick icon="el-icon-key" @click="Searchrolerouter()">権限</el-button>
          <el-dialog title="役職情報新規" v-model="dialogFormVisible" @close="resetForm('Role')" destroy-on-close>
            <el-form :model="Role" :rules="rules" ref="Role">
              <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
                <el-select v-model="Role.groupEnterpriseGuid" placeholder="会社を選択してください" class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="役職名称" prop="roleName" :label-width="formLabelWidth">
                <el-input v-model.trim="Role.roleName" autocomplete="off" placeholder="ロールの名前を選択してください" class="dialog_detail" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="役職ソート順" prop="sortFlag" :label-width="formLabelWidth">
                <el-input v-model.number="Role.sortFlag" autocomplete="off" class="dialog_detail" maxlength="3"></el-input>
              </el-form-item>
              <el-form-item label="開発部門管理者か否か" prop="leaderFlag" :label-width="formLabelWidth">
                <el-switch v-model="Role.leaderFlag" active-value="1"  inactive-value="0" autocomplete="off" class="dialog_detail1"></el-switch>
              </el-form-item>
              <el-form-item label="残業代有る/無し" prop="moneyFlag" :label-width="formLabelWidth">
                <el-switch v-model="Role.moneyFlag" active-value="1"  inactive-value="0" autocomplete="off" class="dialog_detail1"></el-switch>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="submitRole()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
          <el-dialog title="役職情報編集" v-model="dialogFormVisible1" @close="resetForm('update')" destroy-on-close>
            <el-form :model="update" :rules="rules" ref="update">
              <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
                <el-select v-model="update.groupEnterpriseGuid" placeholder=" " class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="役職名称" prop="roleName" :label-width="formLabelWidth">
                <el-input v-model.trim="update.roleName" autocomplete="off" placeholder=" " class="dialog_detail" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="役職ソート順" prop="sortFlag" :label-width="formLabelWidth">
                <el-input v-model.number="update.sortFlag" autocomplete="off" class="dialog_detail" maxlength="3"></el-input>
              </el-form-item>
              <el-form-item label="開発部門管理者か否か" prop="leaderFlag" :label-width="formLabelWidth">
                <el-switch v-model="update.leaderFlag"  active-value="1"  inactive-value="0" autocomplete="off" class="dialog_detail1"></el-switch>
              </el-form-item>
              <el-form-item label="残業代有る/無し" prop="moneyFlag" :label-width="formLabelWidth">
                <el-switch v-model="update.moneyFlag"  active-value="1"  inactive-value="0"  autocomplete="off" class="dialog_detail1"></el-switch>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="updateRole()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
          <el-dialog title="役職権限設定" v-model="MenuinnerVisible" width="38%" append-to-body>
            <el-card class="card1">
              <div class="treedata">
                <el-tree :data="treeData" show-checkbox node-key="routerGuid" ref="tree" highlight-current :props="defaultProps" :default-checked-keys="SearchrouterGuid"> </el-tree>
              </div>
              <el-button type="primary" icon="el-icon-circle-check" class="save1" @click="getCheckedKeys()">保存 </el-button>
            </el-card>
            <!-- </el-form> -->
          </el-dialog>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="enterpriseName" label="会社名称"> </el-table-column>
        <el-table-column prop="roleName" label="役職"> </el-table-column>
        <el-table-column prop="leaderFlag" label="開発部門 管理者か否か">
          <template #default="scope">
            <p v-if="scope.row.leaderFlag == 1">はい</p>
            <p v-if="scope.row.leaderFlag == 0">いいえ</p>
          </template>
        </el-table-column>
        <el-table-column prop="moneyFlag" label="残業代　有る/無し">
          <template #default="scope">
            <p v-if="scope.row.moneyFlag == '1'">はい</p>
            <p v-if="scope.row.moneyFlag == '0'">いいえ</p>
          </template>
        </el-table-column>
        <el-table-column prop="sortFlag" label="役職順"> </el-table-column>
      </el-table>
      <div class="divider_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Search.indexPage"
          :page-size="Search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Search: {
        searchbean: {
          groupEnterpriseGuid: '',
          roleName: ''
        },
        indexPage: 1,
        pageSize: 8
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      options1: [
        {
          value: '',
          label: '全部'
        }
      ],
      options2: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      MenuinnerVisible: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'routerName'
      },
      Searchrouter: {
        roleRouterGuid: '',
        roleGuid: ''
      },
      SearchrouterGuid: [],
      updateauth: {
        roleGuid: '',
        // 樹形選中數據
        routerGuids: []
      },
      // 新規
      Role: {
        groupEnterpriseGuid: '',
        roleName: '',
        sortFlag: 100,
        leaderFlag: '',
        moneyFlag: ''
      },
      // 修正
      update: {
        groupEnterpriseGuid: '',
        roleGuid: '',
        roleName: '',
        sortFlag: '',
        leaderFlag: '',
        moneyFlag: ''
      },
      formLabelWidth: '130px',
      rules: {
        groupEnterpriseGuid: [
          {
            required: true,
            message: '会社を選択してください',
            trigger: 'change'
          }
        ],
        roleName: [
          {
            required: true,
            message: '役職名称を入力してください',
            trigger: 'blur'
          }
        ],
        sortFlag: [
          {
            required: true,
            type: 'number',
            message: '0～999の数字を入力してください',
            trigger: 'blur'
          }
        ]
      },
      // 削除
      delete: {
        roleGuid: []
      }
    }
  },
  created() {
    this.Searchid()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.SearchrouterGuid = []
      this.$nextTick(function () {
        this.$refs.tree.setCheckedKeys(this.SearchrouterGuid)
      })
      console.log(this.multipleSelection)
    },
    // 检索menu
    Searchmenu() {
      this.axios
        .post('/router/all/list', {
          groupEnterpriseGuid: this.$store.getters.showentergroup
        })
        .then((res) => {
          this.treeData = res.data.data
          console.log(this.treeData)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    //権限
    Searchrolerouter() {
      if (this.multipleSelection.length !== 1) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.Searchmenu()
      this.Searchrouter.roleGuid = this.multipleSelection[0].roleGuid
      console.log(this.Searchrouter.roleGuid)
      this.axios
        .post('/router/role-router/list', this.Searchrouter)
        .then((res) => {
          // this.treeData = res.data.data
          console.log(this.Searchrouter)
          console.log(res.data.data)
          this.SearchrouterGuid = []
          res.data.data.forEach((item) => {
            this.SearchrouterGuid.push(item.routerGuid)
          })
          console.log(this.SearchrouterGuid)
          this.MenuinnerVisible = true
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getCheckedKeys() {
      this.updateauth.roleGuid = this.Searchrouter.roleGuid
      this.updateauth.routerGuids = this.$refs.tree.getCheckedKeys()
      this.axios
        .put('/router/role-router/update', this.updateauth)
        .then((res) => {
          console.log(res)
          if (res.data.success === 0) {
            return this.$message.error(res.data.msg)
          }
          this.$message.success(this.$getMsg('I0002'))
          this.SearchRole()
          this.MenuinnerVisible = false
        })
        .catch((error) => {
          console.log(error)
        })
    },
    Searchid() {
      function id(value, label) {
        this.value = value
        this.label = label
      }
      this.axios
        .post('/role/selectAllEnterprise')
        .then((res) => {
          console.log(res)
          res.data.data.forEach((item) => {
            this.options1.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
            this.options2.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
          })
          console.log(this.options2)
          this.SearchRole()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 检索
    SearchRole() {
      console.log(this.Search)
      this.axios
        .post('/role/selectListRole', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          this.total = res.data.data.total
          // console.log(this.Searchlist)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.SearchRole()
    },
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.SearchRole()
    },
    // 新規
    submitRole() {
      this.$refs.Role.validate((valid) => {
        console.log(this.Role)
        if (valid) {
          console.log(this.Role)
          this.axios
            .post('/role/insertRole', this.Role)
            .then((res) => {
              if (res.data.success) {
                this.$message.success(this.$getMsg('I0001'))
              } else {
                this.$message.error(res.data.msg)
                return
              }
              this.dialogFormVisible = false
              this.SearchRole()
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 修正
    ReviseRole() {
      if (this.multipleSelection.length !== 1) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.dialogFormVisible1 = true
      this.options2.forEach((item) => {
        if (this.multipleSelection[0].enterpriseName === item.label) {
          this.update.groupEnterpriseGuid = item.value
        }
      })
      this.update.roleGuid = this.multipleSelection[0].roleGuid
      this.update.roleName = this.multipleSelection[0].roleName
      this.update.sortFlag = this.multipleSelection[0].sortFlag
      this.update.leaderFlag = this.multipleSelection[0].leaderFlag
      this.update.moneyFlag = this.multipleSelection[0].moneyFlag
    },
    updateRole() {
      this.$refs.update.validate((valid) => {
        if (valid) {
          console.log(this.update)
          this.axios
            .put('/role/updateRole', this.update)
            .then((res) => {
              if (res.data.success !== 1) return this.$message.error(res.data.msg)
              this.$message.success(this.$getMsg('I0002'))
              this.dialogFormVisible1 = false
              this.SearchRole()
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 削除
    deleteRole() {
      this.delete.roleGuid = []
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.multipleSelection.forEach((item) => {
        this.delete.roleGuid.push(item.roleGuid)
      })
      console.log(this.delete.roleGuid)
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/role/deleteRole', {
              data: this.delete
            })
            .then((res) => {
              this.$message.success(this.$getMsg('I0003'))
              this.SearchRole()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    }
  }
}
</script>

<style scoped>
.el-divider {
  position: absolute;
  bottom: 75px;
  width: 1030px;
}

.el-input {
  width: 175px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 205px;
  margin-right: 25px;
}
.save {
  position: relative;
  left: 250px;
  top: 0px;
}

.dialog_detail {
  width: 390px;
  padding-left: 14px;
  padding-top: 5px;
}

.dialog_detail1 {
  padding-left: 14px;
  padding-top: 5px;
}

:deep(.el-dialog) {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
}

:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 400px;
}

:deep(.el-form-item__label) {
  padding-bottom: 10px;
  font-size: 16px;
}

/* 使select选择框的图标上下居中
  select選択ボックスのアイコンを上下中央にする*/
:deep(.el-input--mini .el-input__icon) {
  line-height: 35px;
}

:deep(.el-form-item__error) {
  /* padding-top: 5px; */
  left: 15px;
}

:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
  content: '';
}

:deep(.el-switch__core) {
  width: 45px !important;
  margin-bottom: 7px;
}

.card1 {
  margin: auto;
  height: 330px;
  overflow: auto;
  width: 490px;
  border-top: 2px solid blue;
  margin-bottom: 60px;
  margin-top: 15px;
}

:deep(.save1) {
  margin: auto;
  margin-bottom: 5px;
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

.el-tree {
  height: auto;
}
.treedata {
  height: 225px;
  overflow: auto;
  margin-top: 5px;
}
:deep(.el-form-item__label) {
  white-space: nowrap;
  width: 185px !important;
}
</style>
